<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true"
            >
      <el-form-item label="企业名称" prop="deptName" >
        <el-input v-model="queryParams.deptName" placeholder="请输入企业名称" clearable
                  @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table v-if="refreshTable" v-loading="loading" :data="deptList" row-key="deptId"
              :default-expand-all="isExpandAll" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
              :row-style="{ height: '30px' }" border :cell-style="{ padding: '0px' }" height="500px">
      <el-table-column label="序号" type="index" align="center" prop="index" :index="indexMethod"></el-table-column>
      <el-table-column prop="deptName" label="企业名称" width="250" align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <!-- 使用按钮作为可点击元素，并绑定点击事件 -->
          <el-button size="small" v-if="scope.row.type == '1'"
                     @click="handleLook(scope.row, scope.$index + 1)" type="text">
            {{ scope.row.deptName }}
          </el-button>
          <el-button size="small" v-else type="text" style="color: black;"> {{ scope.row.deptName
            }}</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="企业地址" width="300" align="center"
                       :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="companyOrigin" label="企业来源" :show-overflow-tooltip="true" align="center">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.enterprise_source" :value="scope.row.companyOrigin" />
        </template>
      </el-table-column>
      <!-- <el-table-column prop="abbreviate" label="企业简称" show-overflow-tooltip="true"></el-table-column> -->
      <el-table-column prop="nature" label="企业性质" :show-overflow-tooltip="true" align="center">

        <template slot-scope="scope">
          <dict-tag :options="dict.type.enterprise_nature" :value="scope.row.nature" />
        </template>
      </el-table-column>

      <el-table-column prop="contacts" label="联系人" align="center" width="90"
                       :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="phone" label="联系电话" width="100" :show-overflow-tooltip="true"
                       align="center"></el-table-column>
      <el-table-column prop="legalPerson" label="法人代表" align="center"
                       :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="companyType" label="企业类别" align="center">

        <template slot-scope="scope">
          <dict-tag :options="dict.type.sys_org_type" :value="scope.row.companyType" />
        </template>
      </el-table-column>
      <el-table-column prop="foundTime" label="成立时间" :show-overflow-tooltip="true" width="90" align="center">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.foundTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize" @pagination="getList" />
  </div>
</template>

<script>
import { listDept, getDept, delDept, addDept, updateDept, listDeptExcludeChild } from "@/api/system/dept";
import { platformOrganization} from "@/api/supplier/supplier";
import Treeselect from "@riophae/vue-treeselect";
import FileView from "@/components/FileView/index"
import { getToken } from "@/utils/auth";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  name: "organization",
  dicts: ['customer_industry_serve', 'customer_industry_garden','enterprise_nature', 'sys_org_type', 'sys_normal_disable', 'customer_industry', 'sys_dept_type', 'sys_org_type', 'enterprise_source'],
  components: { Treeselect, FileView },
  props:{
    deptId:{
      type:Number,
      default:null
    }
  },
  data() {
    return {
      pickerStartOptions: {
        disabledDate: (time) => {
          return time.getTime() > Date.now() - 8.64e7;
        }
      },
      opt: "edit",
      isShowType:false,
      isShow: false,
      index: null,
      deptType: null,
      userNewId: "",
      openAdmin: false,
      fileType: 0,
      // 总条数
      total: 0,
      businessId: null,
      businessCode: "enterprise_logo",
      refreshKey: 0,
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 表格树数据
      deptList: [],
      // 部门树选项
      deptOptions: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 是否展开，默认全部展开
      isExpandAll: true,
      // 重新渲染表格状态
      refreshTable: true,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 15,
        deptId:null,
        deptName: null,
      },
      disabled: false,
      dept: null,
      // 表单参数
      form: {},
      //pdf预览
      dialogImageUrl: '',
      dialogImageUrlPdf: '',
      pageTotal: null,
      dialogVisible: false,
      dialogVisiblePdf: false,
    };
  },
  created() {
    if (this.$store.state.user.info.deptId == 100) {
      this.showSearch = true
    } else {
      this.showSearch = false
    }
    //alert(this.$store.state.user.info.depeId)
    //his.getId();
    this.getList();
  },
  watch: {
    'form.parentId'(newval, oldval) {
      for (let index = 0; index < this.dept.length; index++) {
        const element = this.dept[index];
        if (element.deptId == newval && element.type == 1) {
          this.disabled = false
        } if (element.deptId == newval && element.type == 0) {
          this.disabled = true
        }
      }
    }
  },
  methods: {
    handleLook(row, index) {
      this.$router.push("/collaborative/detail/" + row.deptId);
    },
    indexMethod(index) {
      return (this.queryParams.pageNum - 1) * this.queryParams.pageSize + index + 1;
    },
    /** 查询部门列表 */
    getList() {
      this.loading = true;
      this.queryParams.deptId=this.deptId;
      platformOrganization(this.queryParams).then(response => {
        console.log(response.rows)
        this.deptList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 转换部门数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.deptId,
        label: node.deptName,
        children: node.children
      };
    },
    check(data) {
    },
    // 取消按钮 部门
    cancel() {

      this.open = false;
    },
    cancelAdmin() {
      this.openAdmin = false;
    },
    // 表单重置
    reset() {
      this.form = {
        deptId: null,
        parentId: null,
        ancestors: null,
        deptName: null,
        type: "1",
        companyOrigin: null,
        abbreviate: null,
        registeredFund: null,
        legalPerson: null,
        companyType: "0",
        creditCode: null,
        personalSignature: null,
        nature: null,
        area: null,
        foundTime: null,
        businessScope: null,
        industry: null,
        contacts: null,
        address: null,
        orderNum: null,
        leader: null,
        phone: null,
        email: null,
        status: "0",
        delFlag: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        isCertified: null,
        reviewComments: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 更多操作触发
    handleCommand(command, row) {
      switch (command) {
        case "update":
          this.handleUpdate(row);
          break;
        case "add":
          this.handleAdd(row);
          break;
        case "delete":
          this.handleDelete(row)
          break;
        default:
          break;
      }
    },
  }
};
</script>
